<template>
  <div class="user-center">
     <el-card>
      <div class="user-info" v-if="ishow">
        <div class="user-title">
          <span>个人资料：</span>
        
        </div>
        <div class="user-content">
          <div class="user-item">
            <span>姓名：</span><span>{{ myinfo.name== null ? '未填':myinfo.name }}</span>
          </div>
         
        </div>
        <div class="user-content">
         
          <div class="user-item">
            <span>性别：</span><span>{{ myinfo.gender== null? '未填':  myinfo.gender == 1?'男':'女' }}</span>
          </div>
           <div class="user-item">
            <span>电话号码：</span><span>{{ myinfo.mobile== null ? '未填':myinfo.mobile }}</span>

          </div>
        </div>
       
        <div class="user-content">
          <div class="user-item">
            <span>邮箱：</span><span>{{ myinfo.email== null? '未填':  myinfo.email}}</span>

          </div>
          <div class="user-item">
            <span><el-tag @click="ishow = false">修改个人信息</el-tag></span
            ><span></span>
          </div>
        </div>
      </div>
      <div class="user-info" v-else>
        <div class="user-title">
          <span>姓名：</span
            >
          <span><el-input v-model="myinfo.name"></el-input></span
          >
        </div>
        
        <div class="user-content">
          <div class="user-item">
            <span>性别：</span
            ><span>
              <el-radio-group v-model="myinfo.gender">
      <el-radio label="1">男</el-radio>
      <el-radio label="2">女</el-radio>
    </el-radio-group></span>
          </div>
         
        </div>
        <div class="user-content">
          
          <div class="user-item">
            <span>电话号码：</span
            ><span><el-input v-model="myinfo.mobile"></el-input></span>
          </div>
        </div>
        
        <div class="user-content">
          
          <div class="user-item">
            <span
              ><el-tag type="danger" @click="ishow = true"
                >取消修改</el-tag
              ></span
            ><span
              ><el-tag type="success" @click="submitForm">确定修改</el-tag></span
            >
          </div>
        </div>
      </div>
     </el-card>
  </div>
</template>

<script>

import { editmyinfo } from "network/request.js";
export default {
    data() {
     
      return {
              ishow: true,
        myinfo: {
          name:window.sessionStorage.getItem('uname'),
          email:window.sessionStorage.getItem('email'),
          gender:'1'
      },
      };
    },
    methods: {
      async submitForm() {
          const loading = this.$loading({
          lock: true,
          text: '正在注册请稍等~~~',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
          const {data:res} = await editmyinfo(this.myinfo)
          console.log(res);
         if(res.status == 0) {
          loading.close();
           this.$message.success('修改成功，请重新登陆生效！')
           window.sessionStorage.clear()
           this.$router.push('/')
         }
      }
    }
  }
</script>

<style lang="scss" scoped>
.user-center {
  width: 80%;
  margin: 0 auto;
  .el-card {
    padding-top: 80px;
  }
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .user-title {
    padding: 10px 10px;
    span {
      padding: 10px 10px;
      &:nth-child(1) {
        font-size: 30px;
      }
    }
  }

  .user-content {
    display: flex;
    align-items: center;
    .user-item {
      padding: 20px;
      flex: 1;
      span {
        .el-tag {
          cursor: pointer;
        }
      }
    }
  }
}
</style>